<template>
  <div class="prompts-list-warpper">
    <div class="title">提示词管理</div>
    <div class="list-header">
      <div class="search-input">
        <el-input
          v-model="queryContent"
          placeholder="搜索提示词"
          clearable
          @clear="refreshList"
          :suffix-icon="Search"></el-input>
      </div>
      <div class="btn-group">
        <el-button @click="searchPrompt">查询</el-button>
        <el-button
          type="primary"
          @click="createPrompt"
          >新增</el-button
        >
      </div>
    </div>
    <div class="list-content">
      <PromptListItem
        v-for="item in promptListData"
        :key="item.pdId"
        :prompInfo="item"
        @deleteSomePrompt="deleteSomePrompt(item.pkId)"
        @editSomePrompt="editSomePrompt(item)"
        @checkSomePrompt="checkSomePrompt(item)"></PromptListItem>
    </div>
    <PromptDialog
      :formData="dialogFormData"
      :dialogMode="dialogMode"
      :visible="dialogVisible"
      @refreshList="refreshList"
      @handleDialogClose="handleDialogClose"></PromptDialog>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted } from 'vue'
  import tipMessage from '@/utils/tipMessage'
  import { Search } from '@element-plus/icons-vue'
  import PromptDialog from './promptDialog.vue'
  import PromptListItem from './promptListItem.vue'
  import { debounce } from '@/utils/toolUtils.js'

  const emit = defineEmits([])
  const { proxy } = getCurrentInstance()
  const props = defineProps({})
  const dialogVisible = ref(false)
  const dialogMode = ref('')
  const queryContent = ref('')
  const promptListData = ref([])
  const dialogFormData = ref({})
  /* ========方法========= */
  const handleDialogClose = visible => {
    dialogVisible.value = visible
  }
  const searchPrompt = debounce(async () => {
    try {
      const res = await proxy.$http.getWithUrl('prompt/query', {
        content: queryContent.value
      })
      promptListData.value = res
    } catch (error) {
      console.log(error)
    }
  }, 300)
  const createPrompt = () => {
    dialogMode.value = 'create'
    dialogVisible.value = true
  }
  const editSomePrompt = promptInfo => {
    dialogMode.value = 'edit'
    dialogFormData.value = Object.assign({}, promptInfo)
    dialogVisible.value = true
  }
  const checkSomePrompt = promptInfo => {
    dialogMode.value = 'check'
    dialogFormData.value = Object.assign({}, promptInfo)
    dialogVisible.value = true
  }
  const deleteSomePrompt = async pkId => {
    try {
      const res = await proxy.$http.getWithUrl('prompt/delete', {
        pkId
      })
      refreshList()
      tipMessage('删除成功', 'success')
    } catch (error) {
      console.log(error)
      tipMessage('删除失败', 'warning')
    }
  }
  const refreshList = () => {
    queryContent.value = ''
    searchPrompt()
  }
  onMounted(() => {
    searchPrompt()
  })
</script>

<style scoped lang="scss">
  .prompts-list-warpper {
    @include wh100();
    padding: pxTvh(48) pxTvw(40) pxTvh(40) pxTvw(40);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    & > .title {
      font-weight: 500;
      @include computed_font(24);
      margin-bottom: pxTvh(24);
    }
    & > .list-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: pxTvh(24);
      & > .search-input {
        flex: 1;
        .el-input {
          height: pxTvh(40);
        }
      }
      & > .btn-group {
        width: pxTvw(168);
        display: flex;
        justify-content: end;
        .el-button {
          height: pxTvh(40);
        }
      }
    }
    & > .list-content {
      width: calc(100% + #{pxTvw(6)});
      padding-right: pxTvw(8);
      overflow-y: scroll;
    }
  }
</style>
